<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://com.am.tag" prefix="ui"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="${path}/js/public/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="${path}/js/public/ajax.js"></script>
    <script type="text/javascript" src="${path}/js/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="${path}/js/highcharts/exporting.js"></script>
    <script type="text/javascript" src="${path}/js/My97DatePicker/WdatePicker.js"></script>
	<link rel="stylesheet" href="${path}/css/common.css" type="text/css"></link>
	<script type="text/javascript" src="${path}/js/public/common.js"></script>
	<script type="text/javascript">
		
		var obj = null;
		
		function buildChart()
		{
			var map = Form.formToBean("winform");
			ajax.remoteCall("com.am.dao.TestDao:save",[map],function(reply){
				
				var result = reply.getResult();
	
				var type = $("#type").val();
				var options;
				
				if(type == "column")
				{
					options = {
						chart : {
							renderTo : "container"
						},
						title : {
							text: "挂号量统计"
						},
						xAxis:{
							categories : result.categories
						},
						yAxis: {
				            min: 0,
				            title: {
				                text: "挂号数量"
				            }
				        },
				        tooltip: {
				            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
				                '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
				            footerFormat: '</table>',
				            shared: true,
				            useHTML: true
				        },
				        plotOptions: {
				            column: {
				                borderWidth: 0
				            }
				        },
				        series: result.series
					};
					
					
					
				}else if(type == "line"){
					

					options = {
						chart : {
							renderTo : "container"
						},
						title : {
							text: "挂号量统计"
						},
						xAxis : {
							categories : result.categories
						},
						yAxis : {
						 	title: {
				                text: '挂号量(人次)'
				            },
				            plotLines: [{
				                value: 0,
				                width: 1,
				                color: '#808080'
				            }]
						},
						tooltip: {
				            valueSuffix: '人'
				        },
				        legend: {
				            layout: 'vertical',
				            align: 'right',
				            verticalAlign: 'middle',
				            borderWidth: 0
				        },
				        series: result.series
					};
				}else{
					
					options = {
						chart: {
				            plotBackgroundColor: null,
				            plotBorderWidth: null,
				            plotShadow: false,
				            renderTo : "container"
				        },
				        title: {
				            text: '挂号量统计'
				        },
				        tooltip: {
				    	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				        },	
				        plotOptions: {
				            pie: {
				                allowPointSelect: true,
				                cursor: 'pointer',
				                dataLabels: {
				                    enabled: true,
				                    color: '#000000',
				                    connectorColor: '#000000',
				                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
				                }
				            }
				        },  
				        series: [{
				            type: 'pie',
				            name: '挂号量',
				            data: result.data
				        }]
					};
				}
				
				obj = new Highcharts.Chart(options);
			});
		}
		
	
		function changeDateType(obj)
		{
			var t = obj.value;
			var option = {};
			if(t == "year")
			{
				option.dateFmt = 'yyyy';
			}else if(t == "month")
			{
				option.dateFmt = 'yyyy-MM';
			}else{
				option.dateFmt = 'yyyy-MM-dd';
			}
			
			$("#startDate").unbind("focus");
			$("#endDate").unbind("focus");
			
			$("#startDate").bind("focus",function(){
				
				WdatePicker(option);
			});
			
			$("#endDate").bind("focus",function(){
				
				WdatePicker(option);
			});
		}
		
	</script>
  </head>
  
  <body>
  	<form id="winform">
  		<select id="type" name="type">
  			<option value="column">柱状图</option>
  			<option value="line">线状图</option>
  			<option value="pie">饼状图</option>
  		</select>
	  	<input name="dateType" type="radio" value="year" onclick="changeDateType(this)">年&nbsp;&nbsp;&nbsp;
	  	<input name="dateType" type="radio" value="month" onclick="changeDateType(this)">月&nbsp;&nbsp;&nbsp;
	  	<input name="dateType" type="radio" value="day" onclick="changeDateType(this)">日&nbsp;&nbsp;&nbsp;
	  	<ui:DateTimePicker id="startDate" name="startDate" dateFormat="yyyy-MM-dd"></ui:DateTimePicker>&gt;&gt;
	  	<ui:DateTimePicker id="endDate" name="endDate" dateFormat="yyyy-MM-dd"></ui:DateTimePicker>
	  	<br/><ui:Button type="query" onclick="buildChart()">生成</ui:Button>
  	</form>
  	<div id="container" style="min-width:500px;height:400px"></div>
  </body>
  
</html>
